<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%- include("./component/header.html"); %>
    <style>
        .main {
            width: 80vw !important;
            max-width: initial !important;
        }

        #bookImage {
            /* width: 100%; */
            height: auto;
            max-height: 300px;
            margin-bottom: 20px;
        }

        .form-group {
            display: grid;
            grid-template-columns: auto auto;
            width: 250px;
            margin: 0 auto;
            row-gap: 20px;
            margin-bottom: 30px;
            place-items: center;
        }

        .form-group > input {
            height: 25px;
        }

        .btn-submit {
            height: 30px;
            width: 72px;
        }
    </style>
    <script>
        localStorageUtils.checkLocalStorage();

        if(localStorageUtils.getToken()) {
            // 用户已登录
            if(localStorageUtils.getIsAdmin()) {
                // 是管理员
                window.location.href = "/dashboard/admin/index";
            } else {
                // 是普通用户
                window.location.href = "/dashboard/user/index";
            }
        }
    </script>
</head>
<body>
    <%- include("./component/navbar.html"); %>
    <main class="main">
        <h1><%= headText %></h1>
        <div id="container">
            <div>
                <!-- 用户登录 输入用户名和密码的文本框 -->
                <div class="form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="用户名">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="密码">
                    </div>
                    <button class="btn-submit">登录</button>
                    <p>
                        <a href="/register">注册账号</a>
                    </p>
                    <hr style="opacity: .3;">
                    <div>
                        <p style="margin-bottom: 0;">快捷登录</p>
                        <%- include("./dashboard/component/third-party-login-button.html"); %>
                        <p style="font-size: 12px; color: #7a7a7a;">注：快捷登录需要先绑定已有帐号才可登录，新用户请先注册本站账号</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <%- include("./component/footer.html"); %>

    <!-- <script src="/assets/lib/cryptography/2.2/md5-min.js"></script> -->
    <!-- <script src="/assets/lib/cryptography/2.2/sha1-min.js"></script> -->
    <!-- 获取参数 -->
    <script src="/assets/javascripts/getParams.js"></script>
    <script>
        // 避免重复点击
        var isOnLogin = false;

        // 用户正常登录逻辑
        // $("#username").val("xiaomo");
        // $("#password").val("123456");
        $("#username").keydown(function (event) {
            if (event.keyCode === 13) {
                if ($("#password").val() === "") {
                    $("#password").focus();
                } else {
                    $(".btn-submit").click();
                }
            }
        });
        $("#password").keydown(function (event) {
            if (event.keyCode === 13) {
                if ($("#username").val() === "") {
                    $("#username").focus();
                } else {
                    $(".btn-submit").click();
                }
            }
        });
        $(".btn-submit").click(async function () {
            if ($("#username").val() === "" || $("#password").val() === "") {
                await swal("用户名或密码不能为空！");
                if ($("#username").val() === "") {
                    $("#username").focus();
                } else {
                    $("#password").focus();
                }
                return;
            }

            // 避免用户重复点击
            if (isOnLogin) return;
            isOnLogin = true;

            var username = $("#username").val();
            var password = $("#password").val();
            // var encryptpwd = hex_sha1(password);
            // var encryptpwd = hex_md5(password);

            localStorageUtils.userLogout();
            var visitorId = await getVisitorId();
            postRequest("/user/login", { username: username, password: password, visitorId: visitorId })
                .then(function (response) {
                    var axiosData = response.data;
                    var status = axiosData.status;
                    var data = axiosData.data;

                    if (status === "success") {
                        console.log(data);
                        if (data) {
                            localStorageUtils.userLogin({
                                token: data.token,
                                is_admin: data.group === "ADMIN",
                            });
                            // 用户登录成功

                            // 如果指定了 Redirect 链接，则跳到指定链接
                            var requestParams = getParams();
                            var redirectUrl = requestParams["redirect"] ?? "";
                            if (redirectUrl) {
                                location.href = location.origin + redirectUrl;
                                return;
                            }

                            // 如果没有指定 Redirect 链接，则跳到后台
                            if (localStorageUtils.getIsAdmin()) {
                                window.location.href = "/dashboard/admin/index";
                            } else {
                                window.location.href = "/dashboard/user/index";
                            }
                        } else {
                            swal("用户名或密码错误");
                        }
                    } else {
                        swal(`出错啦！${data.errMsg} (错误码: ${data.errCode})`);
                    }
                }).catch(function (error) {
                    console.log(error);
                    swal("无法连接到服务器，请检查网络连接！");
                }).finally(function () {
                    isOnLogin = false;
                });
        });
    </script>
</body>
</html>